<style type="text/css">
    #menu_items_container
    {
        width:25%;
        height:425px;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #menu_items{
        list-style: none;
        padding: 0px;
        margin: 0px;
        width: 100%;
        border-top: 1px solid #aaa;
 
    }
    #menu_items li{
       background: #C4C4C4;
       margin: 0px;
    }
    #menu_items li a {
       text-decoration: none;
       color:#000;
       display:block;
       padding: 5px;
       border-top: 1px #ffffff solid; 
       border-bottom: 1px  #aaaaaa  solid;
    }
  #menu_items li.active
  {
        background: #EFEFEF;
        border-left: 5px solid #61A8DC;
        padding-left: 0px;
        width: 247px;
    }
    #manage_attach
    {
        width: 73%;
        height: 390px;
        float: left;
        padding-left: 10px;
         background: #EFEFEF;
        border: 1px #AAA solid;
        margin-bottom: 5px;
    }
    
    .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
    .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
    .percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>

<div id="attachment_manage">
    <center> <h2>Attachment des resources aux elements du menu </h2></center>
    <div id="menu_items_container">
        <ul id="menu_items">
            <?php foreach ($list as $key => $li): ?> 
<li <?php if($key == 0) echo "class='active' " ?>> <a href="#attach_<?= ($key + 1) ?>"> <?= $li['title'] ?></a></li>
            <?php endforeach; ?>
            
        </ul>
    </div>
    <div id="manage_attach">
        <div id="error_attach" style="display: none;" class="mws-form-message error"></div>
        <?php $i = 0;
        while ($i++ < count($list)): ?>
            <div id="attach_<?= $i ?>" style="width: 100% ;height: 80% ;<?= ($i > 1) ? 'display:none' : ''; ?>">
                <center> <h4><?=$list[$i - 1]['title']?></h4></center>
                <form action="<?= base_url('project/load_attachments') . "?menu=" . urlencode($list[$i - 1]['code']) ?>" method="post" enctype="multipart/form-data" class="attachments">
                    <input type="file" name="attachments[]" multiple>
                    <input type="submit" class="btn" value="valider">
                </form>

                <div class="progress">
                    <div class="bar"></div >
                    <div class="percent">0%</div >
                </div>



            </div>
<?php endwhile; ?>
    </div>
   <div style="float:left; width: 75%">
       <center>
           <button type="button" class="btn" style="margin-right: 20px" >Précedent</button>
            <button type="button" class="btn" id="next_step2">Suivant</button>
        </center>
    </div>
</div>
 
    




<script>
    
 jQuery(document).ready(function(){
      $('#menu_items li').each(function(index) {

            $(this).click(function() {
                var id = '#attach_' + (index + 1);
                $('#manage_attach').children().hide();
                $(id).show();
                $('#menu_items li').removeClass('active');
                $(this).addClass('active');
                init_bar();
                return false;
            });
        });
$('#next_step2').click(function()
        {
            $('#step2').hide();
            $('#step3').show();
             $.ajax({
                       url: "<?= base_url('project/step_3') ?>",
                       type: 'get',
                       success: function(data)
                       {
                          $('#step3').html(data);
                       }
                    });
        });
        
  function init_bar()
  {
      var bar = $('.bar');
      var percent = $('.percent');
      var status = $('#status');
      status.empty();
      var percentVal = '0%';
      bar.width(percentVal);
      percent.html(percentVal);
  }
                    
 (function() {

            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('.attachments').ajaxForm({
                beforeSend: function() {
                   $('#error_attach').hide();
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);

                },
                success: function(data) {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    data = JSON.parse(data);
                    if(data.success == 0)
                    {
                        $('#error_attach').show();
                        $('#error_attach').removeClass('success');
                        $('#error_attach').addClass('error');
                        $('#error_attach').html('<u>' + data.error  + "</ul>");
                    }
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                }
            }); 
        })();
});


        
</script>
